<script setup lang="ts">
import { onMounted, ref } from 'vue'

// 定义一个ref来存储图片容器元素数组
const imageContainers = ref<HTMLElement[]>([])

// 定义一个ref来存储当前选中图片的索引，初始值为 -1，表示没有选中任何图片
const selectedIndex = ref(-1)

// 在这里填入文字数组
const textarray = [
  '中国共产党第一次全国代表大会，简称中共一大，于1921年7月23日在上海法租界秘密召开，7月30日会场被租界巡捕房搜查后休会，8月3日[a]在浙江省钱塘道嘉兴一艘游船上闭幕结束。大会的召开宣告了中国共产党的正式成立。',
  '第一次国共合作，又称联俄容共，国际上称第一次统一战线（英语：First United Front），大致开始于1924年，结束于1927年，是国共关系史上第一次合作，也是共产国际、中国国民党、中国共产党三者之间关系微妙的一段时期。“联俄容共”是1923年吴稚晖率先使用后，约定俗成的说法，这是孙中山晚年为了协助中国国民党的方针，引入苏联政治训练、军事及财务的外援。中国大陆将该时期中国国民党的政策称为“联俄、联共、扶助农工”三大革命政策。',
  '国民革命军北伐，又称国民政府北伐、中国国民党北伐，是1926年至1928年间，中国国民党领导的国民革命军向北洋军阀发动之内战，因为国民革命军战场由南向北推进，故又简称“北伐”或“北伐战争”。',
  '1927年4月12日蒋介石在上海发动的反革命政变。在北伐战争顺利发展，工农运动不断高涨的形势下，国民党内以蒋介石为代表的右派集团加紧勾结帝国主义和大资产阶级，准备背叛革命。1927年3月下旬，上海第三次工人武装起义胜利后，白崇禧才率军进入上海并占领有利地区进行戒备，蒋介石随后到上海，于4月初约集李宗仁、白崇禧、李济深、张静江、吴稚晖等10余人，举行反共秘密会议，决定立即以暴力手段“清党”，后又与汪精卫密谋，准备进行反革命政变。在这危急时刻，由于共产国际对蒋、汪抱有幻想，陈独秀和汪精卫5日发表《联合宣言》，为蒋介石叛变辟谣，使中共和革命群众对行将发生的实际事变，缺乏应有准备。11日晚，蒋介石密令：已克复的各省，一致实行清党。当晚，蒋指使杜月笙诱杀上海总工会委员长、共产党员汪寿华。12日凌晨，被蒋介石收买的青帮武装分子冒充工人，向分驻各处的工人纠察队发动袭击，工人纠察队奋起抵抗。随后，国民党第二十六军周凤岐部借口调解“工人内讧”，强行解除2 000名工人纠察队的武装。13日上午，上海总工会在闸北青云路广场举行有10万工人参加的群众大会，会后整队游行，当队伍行至宝山路时，遭到国民党军队的屠杀，群众死百余人，伤无数。此后，蒋介石继续捕杀共产党人和革命群众。仅三天，即有300多人被杀，500多人被捕，5000多人失踪。这次反革命政变是大革命从高潮走向失败的转折点。'
]

// 在组件挂载完成后获取所有的图片容器元素
onMounted(() => {
  // 获取所有的.image-container元素并存储到imageContainers ref中
  imageContainers.value = Array.from(document.querySelectorAll('.image-container'))

  // 为每个容器添加鼠标悬浮和移开的事件监听器以及点击事件监听器
  imageContainers.value.forEach((container, index) => {
    container.addEventListener('mouseover', () => {
      // 显示文字，改变透明度为1
      const textOverlay = container.querySelector('.text-overlay')
      if (textOverlay) {
        ;(textOverlay as HTMLElement).style.opacity = '1'
      }
    })
    container.addEventListener('mouseout', () => {
      // 隐藏文字，改变透明度为0
      const textOverlay = container.querySelector('.text-overlay')
      if (textOverlay) {
        ;(textOverlay as HTMLElement).style.opacity = '0'
      }
    })
    container.addEventListener('click', event => {
      // 阻止 <a> 标签的默认跳转行为
      event.preventDefault()

      // 使用箭头函数确保this上下文正确，更新选中图片的索引
      const updateSelectedIndex = () => {
        if (selectedIndex.value === index) selectedIndex.value = -1
        else selectedIndex.value = index
      }

      updateSelectedIndex()
    })
  })
})
</script>

<template>
  <div class="my-area my-row">
    <!--时间编年史-->
    <div class="my-area my-col-md-12">
      <div style="position: relative">
        <h4 class="title">时间编年史</h4>
        <router-link to="/time" class="note"><h4>了解更多</h4></router-link>
      </div>
      <hr class="connected-hr" />
      <!--大文章部分-->
      <div class="my-container" style="height: 100%">
        <div class="my-area my-row">
          <div style="display: flex; margin: 30px 0" class="my-col-md-12">
            <!--介绍-->
            <div class="my-col-md-12 photo_border" style="margin: 10px 30px">
              <div class="my-col-md-2 photo image-container" style="margin: 10px 40px">
                <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
                <a href="#">
                  <img src="../assets/102中共一大会址.jpg" style="width: 100%; height: 100%" />
                </a>
                <h4 style="text-align: center" class="text-overlay">中国共产党成立</h4>
              </div>
              <div class="my-col-md-2 photo image-container" style="margin: 10px 40px">
                <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
                <a href="#">
                  <img src="../assets/103国共第一次合作.jpg" style="width: 100%; height: 100%" />
                </a>
                <h4 style="text-align: center" class="text-overlay">国共第一次合作</h4>
              </div>
              <div class="my-col-md-2 photo image-container" style="margin: 10px 40px">
                <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
                <a href="#">
                  <img src="../assets/104黄埔军校.jpg" style="width: 100%; height: 100%" />
                </a>
                <h4 style="text-align: center" class="text-overlay">北伐战争</h4>
              </div>
              <div class="my-col-md-2 photo image-container" style="margin: 10px 40px">
                <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
                <a href="#">
                  <img src="../assets/105四一二反革命政变.jpg" style="width: 100%; height: 100%" />
                </a>
                <h4 style="text-align: center" class="text-overlay">四一二反革命政变</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="my-area my-col-md-12">
        <h4 id="text">{{ selectedIndex === -1 ? '' : textarray[selectedIndex] }}</h4>
      </div>
    </div>
  </div>
</template>

<style>
@import '@/modules/moules1/modules1_BigRevelution/assets/main.css';
</style>
<style scoped>
.image-container {
  position: relative;
  /* 设置为相对定位 */
  display: inline-block;
  /* 或者block，根据需要 */
}
/* 了解更多 */
.note {
  display: inline-block;
  color: #d3d3d3;
  font-weight: lighter;
  position: absolute;
  right: 0;
}
.note:hover {
  color: black;
}
/* 文字 */
.text-overlay {
  position: absolute;
  /* 设置为绝对定位 */
  bottom: 5%;
  /* 从底部开始 */
  font-family: '华文行楷', cursive;
  color: red;
  /* 白色文字 */
  font-size: 35px;
  width: 100%;
  /* 宽度与图片相同 */
  padding: 10px;
  /* 一些内边距 */
  box-sizing: border-box;
  /* 确保内边距不会增加总宽度 */
  text-align: center;
  /* 文字居中 */
  opacity: 0;
  /* 默认透明度为0，即不显示 */
  transition: opacity 0.5s ease-in-out;
  /* 过渡效果，0.5s，使用ease-in-out缓动函数 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 使文字垂直和水平居中 */
  pointer-events: none;
  /* 防止文字覆盖图片的点击事件 */
}

/*照片框*/
.photo_border {
  /* border: 1px solid #D3D3D3; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  height: 100%;
}

.photo {
  /* border: 1px solid #D3D3D3; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  /* 平滑过渡效果 */
  transform: translateY(0);
  /* 初始状态，不移动 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* 普通状态下轻微阴影 */
}

.photo:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 悬浮时的阴影设置 */
  transform: translateY(-10px);
  /* 鼠标悬浮时向上移动 */
}

.border {
  /* border: 1px solid #D3D3D3; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  /* 平滑过渡效果 */
  transform: translateY(0);
  /* 初始状态，不移动 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* 普通状态下轻微阴影 */
  margin: 10px 0;
}
/*.border:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-10px);
} */
/* 标题 */
.title {
  background-color: red;
  color: white;
  border-top-right-radius: 10px;
  box-sizing: border-box;
  display: inline-block;
  padding: 5px 10px;
  margin: 2px 0px;
}
</style>
